<template>
	<view class="page_content">
		<view style="background-color: #FFFFFF;">
			<veiw class="flex_between" style="margin-bottom: 10rpx;">
				<u-search placeholder="模型名称关键字" bgColor="#FAFAFA" :showAction="false" v-model="pageParam.modelName"
					@change="nameBlur"></u-search>
			</veiw>
			<scroll-view class="scroll-view" scroll-x="true">
				<view class="scroll-item" v-for="(item,index) in list" :key="index" @click="changeTabs(item,index)">
					<view :class="current == index ? 'active' : ''">
						{{item.dictLabel}}
					</view>
					<view :class="current == index ? 'active_icon' : ''"></view>
				</view>
			</scroll-view>
		</view>
		<!-- <u-search placeholder="模型名称关键字" shape="square" bgColor="#ffffff" :showAction="false"
			v-model="pageParam.modelName" @change="nameBlur"></u-search>
		<u-tabs :list="list" :current="current" keyName="dictLabel" @change="changeTabs"></u-tabs>
	 --> <u-list @scrolltolower="scrolltolower" v-if="indexList.length > 0">
			<veiw class="flex_start_wrap" style="padding: 0 28rpx;">
				<view style="width: 49%;border-radius:0 24rpx 24rpx 0;" v-for="(item, index) in indexList"
					class="mt_24 b_FFF" :key="index" @click="handleDetail(item)">
					<u-image :src="item.src" width="100%" height="100" radius="12" mode="aspectFill"></u-image>
					<view class="content_border">
						<!-- <view class="flex_between pt_12 mb_16">
							<view style="font-size: 32rpx;">{{ item.modelName }}</view>
						</view> -->
						<view class="flex_between pt_12">
							<view style="font-size: 32rpx;">{{ item.modelName }}</view>
							<view class="flex_center_end c_999 font-24">
								<u-icon color="#999999" name="eye"></u-icon>
								<text style="padding-left: 8rpx;">{{ item.viewNum }}</text>
							</view>
						</view>
					</view>
				</view>
			</veiw>
		</u-list>
		<u-empty mode="data" marginTop="160" v-else></u-empty>
		<u-divider v-if="indexList.length > 0" :text="loadingText"></u-divider>
		<u-action-sheet :show="showLevel" :actions="actions" @close="showLevel = false" @select="levelSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		modelList,
		modelType
	} from '@/api/common.js'
	import config from '@/config.js'
	import {
		getToken
	} from '@/utils/auth'
	export default {
		data() {
			return {
				current: 0,
				list: [],
				indexList: [],
				loadingText: '',
				total: 0,
				timer: null,
				pageParam: {
					displayType: 0,
					pageNum: 1,
					pageSize: 16,
					modelType: '',
					modelName: ''
				}
			}
		},
		onReachBottom() {
			if (this.indexList.length < this.total) {
				setTimeout(() => {
					this.pageParam.pageNum++
					this.loadmore()
				}, 1000)
			}
		},
		onShow() {
			if (getToken() && this.list.length == 0) {
				modelType().then(res => {
					if (res.code == 200) {
						let list = res.data
						list.unshift({
							dictValue: '',
							dictLabel: "全部"
						})
						this.list = list
					}
				})
				this.loadmore()

			}
		},
		onLoad() {
			if (getToken()) {
				modelType().then(res => {
					if (res.code == 200) {
						let list = res.data
						list.unshift({
							dictValue: '',
							dictLabel: "全部"
						})
						this.list = list
					}
				})
				this.loadmore()

			} else {
				uni.showToast({
					title: "请先登录授权",
					icon: "none"
				});
				uni.switchTab({
					url: '/pages/tabbar/my'
				})
			}
		},
		methods: {
			changeTabs(item, index) {
				this.pageParam.pageNum = 1
				this.pageParam.modelType = item.dictValue
				this.current = index
				this.loadmore()
			},
			nameBlur() {
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.pageParam.pageNum = 1
					this.loadmore();
				}, 500);
			},
			scrolltolower() {
				if (this.indexList.length < this.total) {
					setTimeout(() => {
						this.pageParam.pageNum++
						this.loadmore()
					}, 1000)
				}
			},
			loadmore() {
				// 3D工坊
				modelList(this.pageParam).then(res => {
					let rows = res.rows
					rows.forEach(item => {
						item.src = config.baseImg + item.logo
						let data = this.list.find(kItem => item.modelType == kItem.dictValue)
						item.dictLabel = data.dictLabel
					})
					this.indexList = this.pageParam.pageNum == 1 ? rows : this.indexList.concat(rows)
					this.total = res.total
					if (this.indexList.length == this.total) {
						this.loadingText = '已加载完成'
					} else {
						this.loadingText = '加载中'
					}
				})
			},
			levelSelect(e) {
				this.value = e.name
				this.showLevel = false
			},
			handleDetail(item) {
				uni.navigateTo({
					url: '/pages/animation?data=' + JSON.stringify(item)
				});
			}
		}
	}
</script>
<style scoped>
	.mt_24:nth-child(2n-1) {
		margin-right: 2%;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		background-color: #fff;
	}

	.page_content {
		padding: 0;
	}
</style>